<template>
  <div>
    <div class="d-sm-flex justify-content-between align-items-center mb-4">
      <h3 class="text-dark mb-0">订单预览</h3>
    </div>

    <div class="row">

<!--      <div class="col-lg-6 col-xl-6">-->
<!--        <div class="card shadow mb-4">-->
<!--          <div class="card-header d-flex justify-content-between align-items-center">-->
<!--            <h6 class="text-primary fw-bold m-0">修改订单</h6>-->
<!--            <el-button type="primary" size="mini" @click="">提价</el-button>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div class="row">-->
<!--              <div class="col-lg-4 col-xl-4">-->
<!--                <span style="line-height: 32px">商品名称</span>-->
<!--              </div>-->
<!--              <div class="col-lg-8 col-xl-8">-->
<!--                <el-input size="small" v-model="good.gname"></el-input>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="row" style="margin-top: 10px">-->
<!--              <div class="col-lg-4 col-xl-4">-->
<!--                <span style="line-height: 32px">商品种类</span>-->
<!--              </div>-->
<!--              <div class="col-lg-8 col-xl-8">-->
<!--                <el-select size="small" v-model="good.gkind">-->
<!--                  <el-option value="食品" label="食品"></el-option>-->
<!--                  <el-option value="饮料" label="饮料"></el-option>-->
<!--                  <el-option value="生活用品" label="生活用品"></el-option>-->
<!--                  <el-option value="学习用品" label="学习用品"></el-option>-->
<!--                </el-select>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="row" style="margin-top: 10px">-->
<!--              <div class="col-lg-4 col-xl-4">-->
<!--                <span style="line-height: 32px">库存数量</span>-->
<!--              </div>-->
<!--              <div class="col-lg-8 col-xl-8">-->
<!--                <el-input-number size="small" :min="1" v-model="good.gnumber"></el-input-number>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="row" style="margin-top: 10px">-->
<!--              <div class="col-lg-4 col-xl-4">-->
<!--                <span style="line-height: 32px">商品价格</span>-->
<!--              </div>-->
<!--              <div class="col-lg-8 col-xl-8">-->
<!--                <el-input-number size="small" :min="0" v-model="good.gprice"></el-input-number>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="row" style="margin-top: 10px">-->
<!--              <div class="col-lg-4 col-xl-4">-->
<!--                <span style="line-height: 32px">商品图片</span>-->
<!--              </div>-->
<!--              <div class="col-lg-8 col-xl-8">-->
<!--                <el-input size="small" v-model="good.gsrc" placeholder="路径或者网址"></el-input>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->


    </div>

    <el-card shadow="always">
      <el-table :data="orders" @row-click="getSelectOrder($event)" highlight-current-row>
        <el-table-column label="订单ID" prop="oid" width="80px"></el-table-column>
        <el-table-column label="用户" prop="uname"width="70px"></el-table-column>
        <el-table-column label="手机号" prop="utelephone"></el-table-column>
        <el-table-column label="名称" prop="gname" width="120px"></el-table-column>
        <el-table-column label="数量" prop="onumber" width="50px"></el-table-column>
        <el-table-column label="价格" prop="omoney" width="60px"></el-table-column>
        <el-table-column label="地址" prop="olocal" width="100px"></el-table-column>
        <el-table-column label="时间" prop="odate" width="100px"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-select size="small" v-model="scope.row.ostate" @change="changeState(scope.row)">
              <el-option value="未发货" label="未发货"></el-option>
              <el-option value="已发货" label="已发货"></el-option>
              <el-option value="已送达" label="已送达"></el-option>
              <el-option value="已签收" label="已签收"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-button type="primary" size="small" @click="getOrders()">刷新</el-button>
        <el-button type="danger" size="small" @click="deleteOrder()">删除所选订单</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "OrdersConf",
  data(){
    return{
      orders:[],
      selectOrder:'',

    }
  },
  methods:{
    getSelectOrder(value){
      this.selectOrder = value.oid;
    },

    changeState(value){
      axios.get('http://localhost:9001/order/updateOrderState?oid='+value.oid+'&ostate='+value.ostate).then(res=>{
        this.$message.success("修改成功");
      })
    },
    deleteOrder(){
      if (this.selectOrder ==''){
        this.$message.error("请选择删除的订单")
      } else {
        axios.get('http://localhost:9001/order/deleteOrder?oid='+this.selectOrder).then(res=>{
          this.$message.success("删除成功");
        })
        this.getOrders();
      }
    },
    getOrders(){
      axios.get('http://localhost:9001/order/selectOrdersBySid?sid='+sessionStorage.getItem("sid")).then(res=>{
        this.orders = res.data;
      })
    }
  },
  created() {
    this.getOrders();
  }
}
</script>

<style scoped>

</style>